<template>
    <div class="wrapper">
       <Header></Header>
       <Search @solveQuery="queryArrInTitle"></Search>
       <div class='rent-info' v-for="item in paginationArticle" :key='item._id' v-if="isShow">
                <div class="rent-title">{{item.title}}</div>
                <div class="rent-topicUrl"> <a :href='item.topicUrl' target="_blank">{{item.topicUrl}}</a> </div>
                <div class="public-data"><span class="source">来源:豆瓣</span>{{item.publicData}}</div>
       </div>

        <div class='rent-info' v-for="item in queryInfoArr" :key='item._id' v-if="!isShow">
                <div class="rent-title">{{item.title}}</div>
                <div class="rent-topicUrl"> <a :href='item.topicUrl' target="_blank">{{item.topicUrl}}</a> </div>
                <div class="public-data"><span class="source">来源:豆瓣</span>{{item.publicData}}</div>
       </div>
       <Pagination :count='count' :display="15" @current-index="getArticles"></Pagination>
    </div>
</template>

<script>
import axios from 'axios'
import Header from './components/header'
import Search from '@/components/search'
import Pagination from '@/components/pagination'
export default {
    name:'home',
    data(){
       return{
           searchArr:'',
           rentInfoArr:[],
           paginationArticle:[],
           queryInfoArr:[],
           count:0,
           isShow:true
       } 
    },
    components:{
        Header,
        Search,
        Pagination
    },
    methods:{
        getArticles(index){
            let $=this

            if(index === undefined){
                index=1
            }

            axios.get('/api/getRentInfo').then(function(res){
                if(res.data){
                    let tempArr=[]
                    $.rentInfoArr=res.data
                    $.count=$.rentInfoArr.length
                   
                    $.rentInfoArr.forEach(element=>{
                        element.publicData = new Date(element.publicData).toLocaleString()
                    })

                    for(let i=15*(index-1);i<15*index;i++){
                        tempArr.push($.rentInfoArr[i])
                    }

                    $.paginationArticle=[...tempArr]
                }
               
            })
        },
        queryArrInTitle(params){
           
            this.isShow = params.length>=1 ? false :true 
            
            let arr = JSON.stringify(this.rentInfoArr)  
            let tempArr= JSON.parse(arr)      
            // let tempArr= [...this.rentInfoArr]
           
            let dublicateArr=[]
             
            
            for(let param in params){
                tempArr.forEach(element => {
                    if(element.isExist === true){
                        if(element.title.indexOf(params[param]) >-1){
                            element.isExist= true
                        }else{
                            element.isExist =false
                        }
                    }
                });
            }
            
            tempArr.forEach(item =>{
                if(item.isExist === true){
                    dublicateArr.push(item)
                }
            })
           
            this.queryInfoArr =[...dublicateArr]
           
        }

    },

    mounted(){
        this.getArticles()
    }
}
</script>

<style lang='stylus' scoped>
    .rent-info
        border-bottom :1px solid #cccccc
        height :100px
        position :relative
        width :100%
        .rent-title
            font-weight :bold
            font-size :20px
            position :absolute
            left :30%
            top :5%
            width:500px
            white-space :nowrap
            overflow :hidden
            text-overflow: ellipsis
        .rent-topicUrl
            position:absolute
            left :30%
            top:40%
        .public-data
            position:absolute
            left:30%
            bottom:5%
            .source
                color :#DBDBDB
                padding-right :10px
                
</style>
